<template>
  <div>
    <div class="map" ref="map"></div>
  </div>
</template>

<script>
import { Scene } from '@antv/l7';
import { WorldLayer } from '@antv/l7-district';
import { GaodeMap } from '@antv/l7-maps';
import { getWorldCovid19Data } from '@/api/covid19Data.js'


export default {
    data(){
        return{
            el: null,
            scene: null,
            layer: null,
            worldData:[]
            }
    },

    created(){
        this.onLoadData()
    },

    methods:{
      //加载主数据
      onLoadData(){
        let mainData = {}
        getWorldCovid19Data(mainData).then(response => {
          this.worldData = response.data.data.data
          this.initMap()
        })
      },
      initMap(){
          this.$nextTick(() => {
              this.el = this.$refs.map
              this.scene = new Scene({
              logoVisible: false,
              id: this.el,
              map: new GaodeMap({
                  center: [ 116.2825, 39.9 ],
                pitch: 0,
                style: 'blank',
                zoom: 0,
                minZoom: 0,
                maxZoom: 10
              })
              });

              this.scene.on('loaded', () => {
                this.layer = new WorldLayer(this.scene, {
                  data: this.worldData,
                  joinBy: [ 'NAME_CHN', 'name' ],
                  bubble: {
                    enable: true,
                    color: {
                      field: 'NAME_CHN',
                      values: [
                        '#e6550d',
                      ]
                    },
                    size: {
                      field: 'confirm',
                      values:  (confirm) => { // 颜色的回调函数
                                    return  confirm > 4800000 ? 25 :
                                            confirm > 2400000 ? 23 :
                                            confirm > 1280000 ? 21 :
                                            confirm > 640000 ? 19 :
                                            confirm > 320000 ? 17 :
                                            confirm > 160000 ? 15 :
                                            confirm > 80000 ? 13 :
                                            confirm > 40000 ? 11 :
                                            confirm > 20000 ? 9 :
                                            confirm > 10000 ? 7 : 5
                                            }
                    },
                  },
                  stroke: '#ccc',
                  label: {
                    enable: true,
                    textAllowOverlap: false,
                    field: 'NAME_CHN'
                  },
                  popup: {
                    enable: true,
                    Html: props => {
                      return ` <p>${props.NAME_CHN}</p>
                              <p><span>总确诊人数:</span><span>${props.confirm}</span></p>
                              <p><span>总治愈人数:</span><span>${props.heal}</span></p>
                              <p><span>总死亡人数:</span><span>${props.dead}</span></p>`;
                    }
                  }
                });
              });
            })
      }
    }
}
</script>

<style scoped>
.map{
    margin-top: 10px;
    height: 80vh;
    width: 100%;
    position: relative;
  }
</style>